---
const year = new Date().getFullYear();
---

<footer>
	<div>
		Copyright &copy; {year}
		<span aria-label="rocket emoji">🚀</span>
		Astro Cactus
	</div>
	<nav aria-label="More on this site">
		<a href="/">Home</a>
		<a href="/about">About</a>
		<a href="/posts">Blog</a>
	</nav>
</footer>

<style>
	footer {
		@apply mt-auto flex w-full flex-col items-center justify-center gap-y-2 pt-20 pb-4 text-center align-top text-gray-500 sm:flex-row sm:justify-between sm:text-xs;

		> div {
			@apply mr-0 sm:mr-4;
		}

		nav {
			@apply flex gap-x-2 sm:gap-x-0 sm:divide-x sm:divide-gray-500;

			a {
				@apply px-4 py-2 sm:py-0 sm:px-2 sm:hover:text-textColor sm:hover:underline;
			}
		}
	}
</style>
